<template>
  <div class="app">
    <Game>
      <template scope="xiang">
        <ul>
          <li v-for="g in xiang.games" :key="g.id">{{ g.name }}</li>
        </ul>
      </template>
    </Game>

    <Game>
      <template slot-scope="{games}">
        <ol>
          <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ol>
      </template>
    </Game>

    <Game>
      <template v-slot="xiang">
        <h3 v-for="g in xiang.games" :key="g.id">{{ g.name }}</h3>
      </template>
    </Game>

 </div>
</template>

<script>
  import Game from './components/Game.vue'
  export default {
    name:'App',
    components:{Game},
  }
</script>

<style>
  .app {
    background-color: #ddd;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px;
    display: flex;
    justify-content:space-evenly
  }
</style>